<script lang="ts" setup>
/**
 * Props
 * @config {
 *   { label: 'A', value: '1', disabled: false },
 *   { label: 'B', value: '2' },
 *   { label: 'C', value: '3' },
 *   ...
 * }
 *
 * @value 默认选中项
 *
 * @title 标题
 *
 * Emits
 * @value 确认时返回的选项
 *
 * @cancel 取消
 */
import { computed, ref } from 'vue'
import { keepBottomSafeDis } from '@U/common'
import Icon from '@C/Icon.vue'
import type { BaseType, IObj, PropType } from '@/interface'

const props = defineProps({
  config: {
    type: Array as PropType<Array<IObj>>,
    required: true,
  },
  title: {
    type: String,
    required: false,
    default: '',
  },
  value: {
    type: String as PropType<BaseType>,
    required: false,
    default: '',
  },
})
const emits = defineEmits(['value', 'cancel'])
const cancelFn = () => emits('cancel')

// 配置项
const defIndex = computed(() => {
  if (props?.value) {
    return props.config?.findIndex((i: IObj) => i.value === props.value)
  }
  return 0
})
const columns = computed(() => (props.config?.map((i: IObj) => ({
  text: i.label,
  data: i,
  disabled: i?.disabled || false,
}))))
const vanPickerRef = ref()
const confirmFn = () => {
  const data = vanPickerRef.value?.getValues()[0].data
  emits('value', data.value, data)
}
</script>

<template>
  <div class="popup_box">
    <div class="popup_title">
      <div>{{ title }}</div>
      <div class="icon_close" @tap="cancelFn">
        <Icon name="icon-shanchu-4" size="28" />
      </div>
    </div>
    <div class="popup_body">
      <van-picker
        ref="vanPickerRef"
        :columns="columns"
        :default-index="defIndex"
        :title="title"
        :visible-item-count="3"
      />
    </div>
    <div :style="keepBottomSafeDis()" class="flex_cen_cen mt20" @tap="confirmFn">
      <div class="btn_primary" style="width: 686rpx">确定</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
</style>
